<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas文字显示</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        const paragraphs = [
            '这是第一个文字段落，内容较少。',
            '这是第二个文字段落，内容稍微多一些，需要更多的空间来展示。',
            '这是第三个文字段落，内容更多，可能需要自动换行和调整字体大小。',
            '这是第四个文字段落，内容非常多，可能需要用省略号来处理超出部分。',
            '数据分析的目的是把隐藏在一大批看来杂乱无章的数据中的信息集中和提炼出来，从而找出所研究对象的内在规律。在实际应用中，数据分析可帮助人们做出判断，以便采取适当行动。数据分析是有组织有目的地收集数据、分析数据，使之成为信息的过程。这一过程是质量管理体系的支持过程。在产品的整个寿命周期，包括从市场调研到售后服务和最终处置的各个过程都需要适当运用数据分析过程，以提升有效性。例如设计人员在开始一个新的设计以前，要通过广泛的设计调查，分析所得数据以判定设计方向，因此数据分析在工业设计中具有极其重要的地位。'
        ];
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        function drawParagraph(index) {
            if (index >= paragraphs.length) return;

            const paragraph = paragraphs[index];
            const textBoxWidth = canvas.width * 1 / 3;
            const textBoxHeight = canvas.height * 2 / 3;
            const x = (canvas.width - textBoxWidth) / 2;
            const y = (canvas.height - textBoxHeight) / 2;

            let fontSize = Math.min(textBoxHeight, textBoxWidth) / 10;
            ctx.font = `${fontSize}px Arial`;

            let words = paragraph.split('');
            let line = '';
            let lines = [];

            for (let n = 0; n < words.length; n++) {
                let testLine = line + words[n] + ' ';
                let metrics = ctx.measureText(testLine);
                let testWidth = metrics.width;
                if (testWidth > textBoxWidth && n > 0) {
                    lines.push(line);
                    line = words[n] + ' ';
                } else {
                    line = testLine;
                }
            }
            lines.push(line);

            while (lines.length * fontSize > textBoxHeight) {
                fontSize--;
                ctx.font = `${fontSize}px Arial`;
                lines = [];
                line = '';
                for (let n = 0; n < words.length; n++) {
                    let testLine = line + words[n] + ' ';
                    let metrics = ctx.measureText(testLine);
                    let testWidth = metrics.width;
                    if (testWidth > textBoxWidth && n > 0) {
                        lines.push(line);
                        line = words[n] + ' ';
                    } else {
                        line = testLine;
                    }
                }
                lines.push(line);
            }

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'black';
            let currentY = y + fontSize;
            for (let i = 0; i < lines.length; i++) {
                if (currentY + fontSize > y + textBoxHeight) {
                    ctx.fillText('...', x, currentY);
                    break;
                }
                ctx.fillText(lines[i], x, currentY);
                currentY += fontSize;
            }

            setTimeout(() => drawParagraph(index + 1), 3000);
        }

        drawParagraph(0);
    </script>
</body>
</html>